<!-- 表情弹出框 -->
<style rel="stylesheet/scss" lang="scss" >
.je-vue-emoji-popover {
  padding: 0;
  .emoji-mart {
    border: 0 !important;
    .emoji-mart-emoji {
      span {
        background-image: url(./assets/emoji.png) !important;
      }
    }
  }
}
</style>
<template>
  <mu-popover
    :open.sync="visible"
    :lazy="true"
    :trigger="triggerEl"
    :placement="placement"
  >
    <picker
      :size="20"
      :i18n="pickerI18n"
      :include="['recent','people']"
      :show-preview="false"
      :show-search="false"
      :show-skin-tones="false"
      @select="selectEmoji"
      :native="true"
      set="messenger"
      emoji="point_up"
    />
    <slot
      slot="reference"
      name="button"
    />
  </mu-popover>
</template>
<script>
import { Picker } from 'emoji-mart-vue';
import Popover from '../dateTimePicker/museUI/Popover';

Vue.use(Popover);
export default {
  name: 'JeEmojiPopover',
  components: { Picker },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    triggerEl: {
      type: String,
      default: '',
    },
    placement: {
      type: String,
      default: 'bottom-start',
    },
  },
  data() {
    return {
      cn2en: {
        搜索: 'Search',
        没有找到表情: 'Notfound',
        搜索结果: 'Search result',
        常用: 'Recent',
        表情符号和人物: 'Emoticons and people',
        动物与自然: 'Animals and nature',
        食物与饮料: 'Food and drink',
        活动: 'Activity',
        旅行与地点: 'Places',
        物体: 'Bbjects',
        符号: 'Symbols',
        旗帜: 'Flags',
        自定义: 'Custom',
      },
      pickerI18n: {},
      lang: 'zh_CN',
    };
  },
  mounted() {
    this.pickerI18n = {
      search: this.getEn('搜索'),
      notfound: this.getEn('没有找到表情'),
      categories: {
        search: this.getEn('搜索结果'),
        recent: this.getEn('常用'),
        people: this.getEn('表情符号和人物'),
        nature: this.getEn('动物与自然'),
        foods: this.getEn('食物与饮料'),
        activity: this.getEn('活动'),
        places: this.getEn('旅行与地点'),
        objects: this.getEn('物体'),
        symbols: this.getEn('符号'),
        flags: this.getEn('旗帜'),
        custom: this.getEn('自定义'),
      },
    };
  },
  methods: {
    selectEmoji(emoji) {
      this.$emit('select', emoji.native, emoji);
      // this.visible = false;
    },
    getEn(cn) {
      this.lang = JE.getCookies('je-local-lang') || 'zh_CN';
      if (this.lang == 'zh_CN') {
        return cn;
      }
      return this.cn2en[cn];
    },
  },
};
</script>
